{% extends "base.html" %}
{% block title %}演员信息{% endblock %}
{% block stylecontent %}
<link href="/static/css/styles.css" rel="stylesheet"/>
{% endblock %}
{% block content %}
<main>
    <div class="container-fluid px-4">
        <ol class="breadcrumb mb-4">
            <li class="breadcrumb-item"></li>
        </ol>
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-chart-area me-1"></i>
                导演作品数量前20
            </div>
            <div class="card-body">
                <div id="mainOne" style="width: 100%;height: 450px;"></div>
            </div>
        </div>
    </div>
</main>
<main>
    <div class="container-fluid px-4">
        <ol class="breadcrumb mb-4">
            <li class="breadcrumb-item"></li>
        </ol>
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-chart-area me-1"></i>
                演员参演排名前20
            </div>
            <div class="card-body">
                <div id="mainTwo" style="width: 100%;height: 450px;"></div>
            </div>
        </div>
    </div>
</main>
{% endblock %}
{% block scriptcontent %}
<script>
  //电影拍摄地点统计
  var chartDom = document.getElementById('mainOne')
  var myChart = echarts.init(chartDom)
  var option
  option = {
    //标题
    title: {
      text: '导演作品数量前20',
      left: 'center',
      textStyle: {
        color: '#67c62b',
        fontSize: 14,
      },
    },
    //提示框
    tooltip: {
      trigger: 'item',
      textStyle: {
        color: '#000',
      },
      axisPointer: {
        type: 'cross',
      },
    },
    //图例
    legend: {
      orient: 'vertical',
      right: 'right',
    },
    //横轴信息
    yAxis: {
      type: 'category',
      name: '演员',
      nameLocation: 'center',
      nameGap: 60,
      data:{{  x | safe }}
    },
    //纵轴信息
    xAxis: {
      type: 'value',
      boundaryGap: false,
      name: '数量',
      nameLocation: 'center',
      nameGap: 30,
    },
    //缩放
    dataZoom:{
        type:'inside',
        orient:'vertical'
    },
    //系列列表
    series: [
      {
        name: '数量',
        type: 'bar',
        data:{{ y | safe }},
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(183,196,227,0.5)',
        },
        itemStyle: {
          color: 'rgba(11,58,207,0.5)',
        },
        //动画效果
        animationDuration: 5000,
        animationEasing: 'bounceInOut',
      }],
  }
  option && myChart.setOption(option)
</script>
<script>
  var chartDom = document.getElementById('mainTwo')
  var myChart = echarts.init(chartDom)
  var option = {
    //标题
    title: {
      text: '',
      left: 'center',
    },
    //提示框
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
      },
    },
    //图例
    legend: {},
    //横轴信息
    xAxis: {
      type: 'category',
      boundaryGap:false,
      data: {{ x1 | safe }},
      name: '演员',
    },
    //纵轴信息
    yAxis: {
      type: 'value',
      name: '数量',
    },
    //系列列表
    series: [
      {
        name: '数量',
        type: 'line',
        data:{{ y1 | safe }},
        areaStyle: {
          color: 'rgba(111,111,222,0.6)',
        },
        lineStyle: {
          color: 'rgba(23,29,158,0.6)',
        },
        itemStyle: {
          color: '#260aa5',
        },
        animationDuration: 5000,
        animationEasing: 'bounceIn',
      }],
  }
  option && myChart.setOption(option)
</script>
{% endblock %}
